<template>
  <div class="chat_bar">
    <div class="options">
      <el-popover placement="top-start" :width="300" trigger="hover">
        <template #default>
          <el-tabs v-model="emojisActiveTab">
            <el-tab-pane
              v-for="(item, index) in emojis"
              :key="index"
              :label="item.name"
              :name="item.name"
            >
              <span
                style="
                  width: 30px;
                  height: 30px;
                  display: inline-block;
                  text-align: center;
                  line-height: 30px;
                  cursor: pointer;
                "
                v-for="emo in item.list"
                :key="emo"
                @click="sendMeo(emo)"
                >{{ emo }}</span
              >
            </el-tab-pane>
          </el-tabs>
        </template>
        <template #reference>
          <span class="iconfont icon icon-biaoqing2"></span>
        </template>
      </el-popover>
      <input type="file" hidden ref="fileRef" @change="changeFile" />
      <span class="iconfont icon icon-wenjian1" @click="chooseFile"></span>
    </div>
    <div class="text">
      <el-input v-model="chatContent" type="textarea" resize="none"></el-input>
    </div>
    <div class="buttom">
      <el-button type="primary" :disabled="!isCanSend" @click="sendMag"
        >发送</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, useTemplateRef } from 'vue'

import emojis from '@renderer/utlis/emo'
import { uploadFileApi } from '@renderer/api/chat'

const emit = defineEmits(['sendMsg'])

const chatContent = ref<string>('') // 输入的内容
const emojisActiveTab = ref<string>('笑脸') // 表情当前激活的tab
const fileRef = useTemplateRef<null | HTMLInputElement>('fileRef')

const sendMag = () => {
  emit('sendMsg', chatContent.value)
  chatContent.value = ''
}

// 计算当前文字按钮是否可以点击
const isCanSend = computed(() => {
  return chatContent.value.length > 0
})

// 点击表情
const sendMeo = (emo: string) => {
  chatContent.value += emo
}

// 选择文件
const chooseFile = () => {
  fileRef.value?.click()
}

// 上传文件
const changeFile = (e: Event) => {
  const file = (e.target as HTMLInputElement).files?.[0]
  // 以formData的形式上传文件
  const formData = new FormData()
  console.log(file)
  formData.append('files', file as File)
  uploadFileApi(formData).then((res) => {
    emit('sendMsg', { type: file?.type.split('/')[0], url: res.data })
  })
}
</script>

<style lang="scss" scoped>
.chat_bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e0e0e0;

  .options {
    margin-top: 5px;
    margin-left: 20px;
    .icon {
      font-size: 18px;
      margin: 0 10px;
      cursor: pointer;
    }
  }

  > .text {
    flex: 1;

    .el-textarea {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-textarea__inner {
      width: 100%;
      height: 100%;
      box-shadow: none;
      border: none;
      outline: none;
      border-radius: 0px;
    }
  }
  > .buttom {
    height: 40px;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>
